<template>
  <div class="writeArticleOriginClass">
    <div class="contentClass" ref="writeArticleContentRef">
      <Form ref="formInline" :model="articleForm" inline label-position="left" :label-width="45" style="text-align: left;" v-show="!this.paraData">
          <FormItem label="标题:" prop="title">
            <Input v-model="articleForm.title" placeholder="请输入标题"/>
          </FormItem>
          <FormItem label="描述:" prop="description">
            <Input v-model="articleForm.description" placeholder="请输入描述"/>
          </FormItem>
        </Form>
      <ckeditor4 ref="ckeditorRef" v-model="ckeditorData" :ckeditorHeight="ckeditorHeight"/>
      <Button style="position: absolute;right:17px;top:10px;" icon="ios-create-outline" @click="release" type="info">发布</Button>
    </div>
  </div>
</template>
<script>
import ckeditor4 from '_c/ckeditor4'
import { saveArticle } from '@/api/article'

export default {
  components: {
    ckeditor4
  },
  data () {
    return {
      articleForm: {},
      ckeditorData: '',
      ckeditorHeight: 500,
      paraData: null
    }
  },
  methods: {
    release() {
      let params = {
        content: this.ckeditorData,
        title: this.articleForm.title,
        description: this.articleForm.description
      }
      saveArticle(params).then(res => {
        this.$Notice[res.data.state=='ok'?'success':'error']({title:'提示', desc: res.data.msg})
        if(res.data.state == 'ok') {
          setTimeout(() => {
            window.close()
          }, 2000)
        }
      })
    }
  },
  mounted() {
    this.ckeditorHeight = this.$refs.writeArticleContentRef.offsetHeight -180-58
    this.paraData = JSON.parse(window.localStorage.paraData)
    if(this.paraData) {
      this.$nextTick(()=> {
        setTimeout(() => {
          this.ckeditorData = this.paraData.item.content
        }, 2000)
      })
    }
  }
}
</script>
<style>
.writeArticleOriginClass {
  background: #f5f7f9;
  height: 100%;
  width: 100%;
  text-align: center;
  padding: 16px;
  position: relative;
}
.contentClass {
  left: 19%;
  position: relative;
  position: absolute;
  height: calc(100% - 32px);
  width: 60%;
  border-radius: 5px;
  background: #fff;
  padding: 16px;
  padding-top: 55px;
}
</style>